@import './variable.less';

/*################ 暗色主题 ####################*/
@headerBg: #2a3152;
@mainBg: #1c213e;
@tableRowHover: #ff0000;
@tableColor: #8cb6f7;
@tableBorderColor: #111;
@pagerActiveColor: #1c87ff;
@pagerBorderColor: #c2cad8;
@spinFixBgColor: rgba(28, 33, 62, 0.6);
@sectionBorderColor: #034c6a;
@wraningColor: #ff6600;

.dark {
  .ivu-tag-dot {
    background-color: @mainBg !important;
  }
  .ivu-tag {
    border: 1px solid @sectionBorderColor;
  }

  .ivu-spin-fix {
    background: @spinFixBgColor;
  }
  // 表单
  .ivu-input,
  .ivu-select-selection,
  .ivu-tag,
  .ivu-input-number-input {
    background-color: @headerBg;
    color: @white;
  }

  .ivu-radio-border {
    border-color: @sectionBorderColor;
    color: @white;
  }

  // 表格
  .ivu-table-body tr.ivu-table-row-hover td,
  .ivu-table-fixed-body tr.ivu-table-row-hover td {
    background-color: @tableRowHover;
    color: @white;
  }
  .ivu-table-border {
    &:after {
      background-color: @mainBg;
    }
  }
  .ivu-table {
    background-color: transparent;
    color: @tableColor;

    &:before {
      background-color: @mainBg;
    }

    td,
    th {
      background-color: @headerBg;
      border-color: @tableBorderColor;
    }

    .ivu-btn-text {
      color: @tableColor;
    }

    .ivu-table-fixed {
      &:before {
        background-color: @tableBorderColor;
      }
    }

    .ivu-table-fixed-right {
      border-left: 1px solid @tableBorderColor;

      &:before {
        background-color: @tableBorderColor;
      }
    }

    .ivu-table-fixed-right-header {
      background-color: @headerBg;
      border-color: @headerBg;
    }

    .ivu-table-fixed-body {
      background-color: @headerBg;
    }
  }

  .ivu-table-row-highlight {
    td {
      background-color: @pagerActiveColor;
      color: @white;
    }
  }
  .ivu-table-wrapper-with-border {
    border-color: @headerBg;
  }
  .ivu-table-wrapper-with-border > .ivu-spin-fix {
    border-color: @headerBg;
  }

  // 分页
  .i-pager,
  .i-pager--input,
  .ivu-page--input {
    color: @white;
    background-color: @headerBg;
  }
  .i-pager--input,
  .ivu-page--input {
    border: 1px solid @pagerBorderColor;
  }
  .i-pager-item,
  .i-pager-prev,
  .i-pager-next,
  .ivu-page-item,
  .ivu-page-prev,
  .ivu-page-next,
  .refresh-btn {
    a {
      color: @white;
    }
  }
  .i-pager-item,
  .ivu-page-item {
    border: 1px solid @pagerBorderColor;
    &:hover {
      background-color: @pagerActiveColor;
      color: @white;
    }
  }
  .ivu-page-item,
  .ivu-page-prev,
  .ivu-page-next {
    background-color: transparent;
  }
  .i-pager-prev,
  .i-pager-next,
  .ivu-page-prev,
  .ivu-page-next {
    border: 1px solid @pagerBorderColor;
  }
  .i-pager-item-active,
  .ivu-page-item-active {
    background-color: @pagerActiveColor;
  }

  // 卡片
  .ivu-card {
    background: @mainBg;
    border: 1px solid @sectionBorderColor;
  }

  .ivu-card-head {
    color: @white;
    border: none;
  }

  // 模态框
  .ivu-modal-content,
  .ivu-modal-header,
  .ivu-modal-body,
  .ivu-modal-footer {
    background-color: @headerBg;
  }
  .ivu-modal-header-inner {
    color: @white;
  }
  .ivu-modal-confirm-head-title {
    color: @white;
  }
  .ivu-modal-confirm-body {
    color: @tableColor;
  }

  // 表单
  .ivu-form-item-label {
    color: @tableColor;
  }
  .ivu-radio-inner {
    border-color: @pagerActiveColor;

    &:after {
      background-color: @pagerActiveColor;
    }
  }
  .ivu-form-item {
    color: @white;
  }
  .ivu-page-simple-pager {
    color: @white;
    input {
      background: @mainBg;
      color: @tableColor;
    }
  }

  .ivu-select-dropdown {
    background-color: @headerBg;
  }
  .ivu-select-item,
  .ivu-dropdown-item {
    color: @white;
  }
  .ivu-dropdown-item {
    color: @pagerBorderColor;
    &:hover {
      background-color: @tableColor;
      color: @white;
    }
  }
  .ivu-select-item-selected,
  .ivu-select-item-selected:hover {
    color: @pagerActiveColor;
  }
  .ivu-select-item,
  .refresh-btn {
    &:hover {
      background-color: @pagerActiveColor;
      color: @white;
    }
  }

  .ivu-select-disabled {
    .ivu-select-selection {
      opacity: 0.4;
    }
  }

  .ivu-select-item-focus {
    color: @mainBg;
  }

  // 折叠菜单
  .ivu-collapse {
    border: none;
    background-color: @mainBg;
  }
  .ivu-collapse-header {
    color: @white !important;
  }
  .ivu-collapse-content {
    background-color: @mainBg;
  }

  .spin-icon-load {
    color: @tableColor;
  }

  .ivu-tag-checked {
    .ivu-tag-text {
      color: @white;
    }
    .ivu-icon-ios-close {
      color: @white;
    }
  }

  // 树形菜单
  .ivu-tree-title {
    color: @white;
    &:hover {
      background-color: @tableColor;
    }
  }
  .ivu-tree-title-selected {
    background-color: @tableColor;
  }
  .ivu-tree-empty {
    color: @white;
  }
  .ivu-tree-arrow {
    color: @white;
  }
  // 列表
  .ivu-list-header {
    color: @white;
  }

  // 日历
  .ivu-date-picker-header {
    .ivu-date-picker-header-label {
      color: @white;
    }
  }

  // 级联选择
  .ivu-cascader {
    .ivu-cascader-menu-item {
      color: @white;
      &:hover {
        background-color: @tableColor;
      }
    }
    .ivu-cascader-menu-item-active {
      background-color: @tableColor;
      color: @pagerActiveColor;
    }
  }

  /*############### 自定义样式 ###############*/
  // 面包屑
  .tags-nav {
    border-top: 1px solid sectionBorderColor;
    border-bottom: 1px solid sectionBorderColor;
    .btn-con {
      &.right-btn {
        border-right: 1px solid sectionBorderColor;
      }
    }
  }

  .ivu-menu-sub {
    li:hover {
      background: @tableColor;
      color: @white;
    }
  }

  .header-con {
    background: @headerBg;
  }

  .content-layout-wrap {
    background: @mainBg;
  }

  .tag-nav-wrapper {
    border-bottom: 1px solid @sectionBorderColor;
    background: @mainBg;
    color: @tableColor;
  }

  .ivu-layout-sider {
    background: @headerBg !important;
    border-right: 1px solid @sectionBorderColor;

    .ivu-menu-sub {
      color: @pagerBorderColor;
    }

    .ivu-menu-opened {
      .ivu-menu-submenu-title {
        background: @headerBg;
      }
      .ivu-menu-sub {
        background: @mainBg;
      }

      .ivu-menu-item {
        &:hover,
        &:active {
          background: @tableColor !important;
          color: @white;
        }
      }
    }
  }
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover {
    background: @tableColor !important;
    color: @white;
  }
  .ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
    background: @tableColor !important;
    color: @white;
    &:hover {
      background: @tableColor !important;
      color: @white;
    }
  }

  .row-abnormal {
    td {
      background-color: @wraningColor;
      color: @white;
    }
  }

  .border-all {
    border: 1px solid @sectionBorderColor;
  }

  // SimpleTable
  .simple-table-wrap {
    .rest-btn {
      color: @white;

      .ivu-icon:hover {
        color: @tableColor;
      }
    }
  }

  // 图标没数据展现字体颜色
  .no-data {
    color: @white;
  }

  // 布局
  .domaintitle {
    color: @white;
  }

  .main-content-con {
    background-color: @mainBg;
  }

  // 侧边栏
  .side-menu-wrapper {
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
      background: @mainBg;
    }

    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active,
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover {
      background: @tableColor;
    }

    .ivu-menu-dark,
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title {
      background: @headerBg;
    }

    .drop-menu-a {
      color: @pagerBorderColor;

      &:hover {
        background: @mainBg;
        color: @white;
      }
    }
  }

  // 表具性能
  .distribution-wrapper {
    .ivu-collapse-item:first-child {
      border-top: 1px solid @sectionBorderColor;
    }

    .tit {
      color: @white;
    }

    .collapse-icon {
      border: 1px solid @sectionBorderColor;
      color: @tableColor;

      &:hover {
        color: @pagerActiveColor;
      }
    }

    .top-box,
    .ivu-collapse-item {
      border: 1px solid @sectionBorderColor;
    }

    .report-box,
    .detail-box {
      color: @tableColor;
    }
  }

  // 功耗优化
  .cycle-wrapper {
    .main-mid {
      border: 1px solid @sectionBorderColor;
    }

    .collapse-icon {
      border: 1px solid @sectionBorderColor;
      color: @tableColor;

      &:hover {
        color: @pagerActiveColor;
      }
    }

    .tit,
    .text {
      color: @white;
    }
    .detail-box {
      color: @tableColor;
    }
  }

  // 缺失数据
  .missdata-wrapper {
    .main-mid {
      border: 1px solid @sectionBorderColor;
    }

    .collapse-icon {
      border: 1px solid @sectionBorderColor;
      color: @tableColor;

      &:hover {
        color: @pagerActiveColor;
      }
    }

    .tit,
    .total-num {
      color: @white;
    }

    .detail-wrap {
      border: 1px solid @sectionBorderColor;
    }

    .detail-box {
      color: @tableColor;
    }
  }

  // 表具匹配
  .matching-wrapper {
    .tit {
      color: @white;
    }
  }

  // 气量日览
  .gassurvey-wrapper {
    .minimap-box {
      border: 1px solid @tableColor;
    }

    .play-box {
      .play-btn {
        color: @white;
        background-color: @wraningColor;
      }
    }

    .ivu-progress-inner {
      background: @headerBg;
      opacity: 0.8;
    }

    .ivu-progress-bg {
      background: @tableColor;
    }
  }
  .operate-table {
    .ivu-table-body {
      background: @headerBg;
    }
  }

  // 气量环比
  .link-ratio-wrap {
  }

  // 用户和表具详情树图
  .user-meter-detail-wrap {
    .name {
      border: 1px solid @tableColor;

      &:before {
        background: @tableColor;
      }
    }
    .info-tit {
      border: 1px solid @white;
      color: @white;
    }
    .info {
      color: @tableColor;
      background: @mainBg;
    }
  }

  .table-adn-barline-marker-wrapper {
    .filter-wrapper {
      background-color: @mainBg;
    }
    .test-info {
      .name {
        color: @tableColor;
      }
      .text {
        color: @white;
      }
    }
  }

  // echart 鼠标右键
  .barline-marker,
  .candlertick-wrap,
  .e-candlestick-wrap {
    .right-menu-wrap {
      background-color: @headerBg;
      color: @tableColor;
      border: 1px solid @sectionBorderColor;

      .item {
        border-bottom: 1px solid @sectionBorderColor;
        &:hover {
          color: @white;
          background-color: @pagerActiveColor;
        }
      }
    }
  }

  // 单表预测
  .single-table-wrap {
    .filter-wrap,
    .table-wrap {
      border: 1px solid @sectionBorderColor;
    }

    .reset-btn {
      color: @white;

      &:hover {
        color: @tableColor;
      }
    }

    .tips {
      color: @white;
    }
  }

  .meter-detail-wrap {
    color: @tableColor;

    .text {
      color: @white;
    }
  }

  .card-head {
    .collapse-icon {
      border: 1px solid @sectionBorderColor;
      color: @tableColor;
    }
  }

  .card-head-border {
    .ivu-card-head {
      border-bottom: 1px solid @sectionBorderColor;
    }
  }

  // 各表小时用气规律
  .tables-time {
    .filter-wrap,
    .table-wrap {
      border: 1px solid @sectionBorderColor;
    }

    .reset-btn {
      color: @white;

      &:hover {
        color: @tableColor;
      }
    }

    .tips {
      color: @white;
    }

    .usegas-info,
    .usegas-average {
      .title {
        color: @tableColor;
      }
    }

    .peak-gas-info {
      .item {
        .name {
          color: @tableColor;
        }
        .text {
          color: @white;
        }
      }
    }
  }

  // 各表天用气规律
  .tables-day {
    .collapse-icon {
      border: 1px solid @sectionBorderColor;
      color: @tableColor;

      &:hover {
        color: @pagerActiveColor;
      }
    }

    .right-top-item-wrap {
      .item {
        .name {
          color: @tableColor;
        }
        .text {
          color: @white;
        }
      }
    }
  }

  // 负异常监控
  .negative-anomaly {
    .collapse-icon {
      border: 1px solid @sectionBorderColor;
      color: @tableColor;

      &:hover {
        color: @pagerActiveColor;
      }
    }

    .right-top-item-wrap {
      .item {
        .name {
          color: @tableColor;
        }
        .text {
          color: @white;
        }
      }
    }
  }

  // 页面定制
  .custom-page {
    .content-left {
      .list-item {
        .item {
          background-color: lighten(@pagerBorderColor, 15%);

          &:hover {
            background-color: @tableColor;
          }
        }
      }
    }

    .content-right {
      .close-icon {
        &:hover {
          color: @pagerActiveColor;
        }
      }
    }

    .ivu-card-head {
      .collapse-icon {
        border: 1px solid @sectionBorderColor;
        color: @tableColor;
      }
    }
  }
  .full-screen {
    background: @mainBg;
  }
}
